

import React, { useEffect, useState, useRef, useCallback } from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { CHANGE_ORDER_PARAM, ORDER_SUCCESS } from 'src/redux/action-type'
import { rePostVerify, validateOrders } from 'src/api/getData'
import { Header, AlertTip } from 'src/components'
import { useQuery } from 'src/utils/hooks'
import './index.scss'

const UserValidation = () => {
    const query = useQuery()
    const dispatch = useDispatch()
    const history = useHistory();
    const {
        // needValidation,
        cart_id,
        orderParam
    } = useSelector(state => state)
    const [validate, setValidate] = useState() //验证码
    const [countDown, setCountDown] = useState(60) //倒计时
    const [reCallVerify, setReCallVerify] = useState() //重发验证信息
    const [showAlert, setShowAlert] = useState(false)
    const [alertText, setAlertText] = useState()
    const [showVoiceTip, setShowVoiceTip] = useState(false) //显示语音验证
    const [type, setType] = useState('sms')
    const timerRef = useRef();

    //获取验证信息
    const getData = useCallback(async () => {
        let res = await rePostVerify(cart_id, query.sig, type);
        setReCallVerify(res)
        if (res.message) {
            setShowAlert(true);
            setAlertText(res.message)
        }
    }, [cart_id, query.sig, type])

    useEffect(() => {
        count();
        getData();
        return () => {
            clearInterval(timerRef.current);
        }
    }, [getData])

    //到计时
    const count = () => {
        let countDown = 60;
        clearInterval(timerRef.current);
        timerRef.current = setInterval(() => {
            countDown--;
            setCountDown(countDown)
            if (countDown === 0) {
                clearInterval(timerRef.current);
            }
        }, 1000);
    }
    //重新发送
    const recall = () => {
        count();
        setType('sms')
        getData();
    }
    //发送语音验证
    const sendVoice = () => {
        setShowVoiceTip(true)
        setType('voice')
        getData();
    }

    //确认订单
    const confrimOrder = async () => {
        dispatch({
            type: CHANGE_ORDER_PARAM,
            validation_code: validate,
            validation_token: reCallVerify.validate_token
        })
        let orderRes = await validateOrders(orderParam);
        //如果信息错误则提示，否则进入付款页面
        if (orderRes.message) {
            setShowAlert(true);
            setAlertText(orderRes.message)
            return
        }
        dispatch({
            type: ORDER_SUCCESS,
            order: orderRes
        })
        history.push('/confirmOrder/payment');
    }

    const onClose = () => {
        setShowAlert(false);
    }

    return <div className="page_confirmorder_uservalidation">
        <Header title="用户手机验证" goBack></Header>
        <section className="validataion_container">
            {showVoiceTip && <div className="voice_tip">
                <p>电话拨打中...</p>
                <p>请留意来自 <span>10105757</span> 或者 <span>021-315754XX</span> 的电话</p>
            </div>}
            <header className="validataion_header">
                <span>收不到短信？使用</span>
                <span onClick={sendVoice}>语音验证码</span>
            </header>
            <form className="input_form">
                <input
                    type="text"
                    name="validate"
                    value={validate}
                    onInput={(e) => setValidate(e.target.value)}
                    placeholder="验证码" maxlength="6"
                />
                {
                    countDown ?
                        <span className="disable">{countDown} S</span>
                        :
                        <span className="repost" onClick={recall}>重新发送</span>
                }
            </form>
        </section>
        <div className="determine" onClick={confrimOrder}>确定</div>
        {showAlert && <AlertTip onClose={onClose} alertText={alertText}></AlertTip>}
    </div>
}

export default UserValidation